<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>受控组件</title>

</head>
<body>
<div id="test"></div>
</body>
<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<!--将jsx转为js-->
<script src="../js/babel.min.js"></script>
<script src="../js/prop-types.js"></script>
<!--babel  由babel转换jsx-->
<script type="text/babel">
    /*
    * 生命周期的三个阶段（旧）
	    1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
            1.constructor()
            2.componentWillMount()
            3.render()
            4.componentDidMount()
	    2. 更新阶段: 由组件内部this.setSate()或父组件render触发
            1.shouldComponentUpdate()
            2.componentWillUpdate()
            3.render()
            4.componentDidUpdate()
	    3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
            1.componentWillUnmount()
    * */
    class Sum extends React.Component {
        constructor(props) {
            console.log('Sum-constructor')
            super(props);
            this.state = {
                count: 0
            }
        }

        add = () => {
            this.setState({
                count: this.state.count + 1
            })
        }
        death = () => {
            ReactDOM.unmountComponentAtNode(document.getElementById('test'))
        }

        force = () => {
            this.forceUpdate()
        }

        //组件挂载前
        componentWillMount() {
            console.log('Sum-componentWillMount')
        }

        //组件挂在完毕
        componentDidMount() {
            console.log('Sum-componentDidMount')
        }

        //卸载将要销毁
        componentWillUnmount() {
            console.log('Sum-componentWillUnmount')
        }

        //控制组件更新"阀门"
        shouldComponentUpdate() {
            console.log('Sum-shouldComponentUpdate')
            return true
        }

        //组件将要更新
        componentWillUpdate() {
            console.log('Sum-componentWillUpdate')
        }

        //组件更新后
        componentDidUpdate() {
            console.log('Sum-componentDidUpdate')
        }

        render() {
            console.log('Sum-render')
            return (
                <div>
                    <h2>当前求和:{this.state.count}</h2>
                    <button onClick={this.add}>点我+1</button>
                    <button onClick={this.death}>卸载组件</button>
                    <button onClick={this.force}>不更改任何状态中的数据，强制更新</button>
                </div>
            )
        }
    }

    class A extends React.Component {
        state = {
            carName: '奔驰'
        }
        changeCar = () => {
            this.setState(
                {carName: '奥拓'}
            )
        }

        render() {
            return (
                <div>
                    <div>A组件</div>
                    <button onClick={this.changeCar}>换车</button>
                    <B carName={this.state.carName}/>
                </div>
            )
        }
    }

    class B extends React.Component {
        // 组件将要接受props,首次传值不算
        componentWillReceiveProps() {
            console.log('B-componentWillReceiveProps')
        }
        //控制组件更新"阀门"
        shouldComponentUpdate() {
            console.log('B-shouldComponentUpdate')
            return true
        }

        //组件将要更新
        componentWillUpdate() {
            console.log('B-componentWillUpdate')
        }

        //组件更新后
        componentDidUpdate() {
            console.log('B-componentDidUpdate')
        }

        render() {
            console.log('B-render')
            return (
                <div>B组件，接收到的车是{this.props.carName}</div>
            )
        }
    }

    ReactDOM.render(<A/>, document.getElementById('test'))
</script>
</html>